<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/js/dialog.js"></script>

    <script>
        $(function () {

            var regionId;

            //查询推荐地区
            $.get("/region/1", function (data) {
                //手动拼接导航栏
                var html = "";
                //导航栏内容
                var content = "";
                $.each(data, function (index, item) {
                    html += '<li class="nav-item">' +
                        '<a data-id="' + item.id + '" class="nav-link" id="pills-' + item.id + '-tab" data-toggle="pill" href="#pills-' + item.id + '">' + item.name + '</a> ' +
                        '</li>';

                    content += '<div class="tab-pane fade" id="pills-' + item.id + '"></div>';

                })
                //拼接导航栏内容
                $("#pills-tab").append(html);

                //拼接导航栏页签对应攻略内容
                $("#pills-tabContent").append(content);


                //点击地区页签,发起对应攻略内容
                $(".nav-link").click(function () {
                    regionId = $(this).data("id");
                    if (regionId) {
                        //获取选中地区对应的攻略页面
                        $.get("/region/" + regionId + "/strategies", function (data) {
                            $("#pills-" + regionId).html(data);
                        })
                    }
                })
            })

            //显示攻略推荐
            $.get("/travels/commends", {type: 2}, function (data) {
                $(".commend").renderValues(data.list[0], {
                    setHref: function (item, value) {
                        var href = $(item).data("href");
                        $(item).attr("href", href + value);
                    }
                });
            })
            //获取当季推荐内容
            $.get("/strategies", {state: 1, pageSize: 0}, function (data) {
                $(".strategyCommend").renderValues(data, {
                    setHref: function (item, value) {
                        $(item).attr("href", $(item).data("href") + value);
                    }
                });
            })

            var currentPage = 2;
            var totalPage = 2;

            function query() {
                $.get("region/" + regionId + "/strategies", {currentPage: currentPage}, function (data) {
                    console.log(data);
                    var html = '';
                    $.each(data.list, function (index, item) {
                        html += '<div class="col-6 mb">' +
                            '<a href="../strategyCatalogs.html?strategyId=' + item.id + '">' +
                            '<img class="float-left " src="' + item.coverUrl + '">' +
                            '<div class="classify-text">' +
                            '<span>' + item.subTitle + '</span>' +
                            '<p>0人收藏</p>' +
                            '</div>' +
                            '</a>' +
                            '</div>';
                    })
                    $(".classify").append(html);
                    currentPage += 1;
                    totalPage = data.pages;
                }, "json");

            }

            //页面滑动监听
            $(window).scroll(function () {
                console.log($(document).scrollTop() + $(window).height() + "--------------" + $(document).height());
                //判断是否需要进行分页
                if ($(document).scrollTop() + $(window).height() + 1 > $(document).height()) {
                    //如果当前页大于总页数,不需要再发分页请求
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了...',
                            autoClose: 1500,
                            position: 'bottom'
                        })
                    }
                }
            })
        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="找攻略">
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
            <span style="font-weight: bold;">推荐</span>
        </a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-top">
        <div class="container commend">
            <a data-href="travelContent.html?travelId=" render-fun="setHref" render-key="travel_id">
                <img render-src="coverUrl">
                <p render-html="title"></p>
            </a>
        </div>
        <hr>
        <div class="container strategyCommend">
            <h6>当季推荐</h6>
            <div class="row hot" render-loop="list">
                <div class="col-4">
                    <a data-href="strategyCatalogs.html?strategyId=" render-fun="setHref" render-key="list.id">
                        <img render-src="list.coverUrl">
                        <p render-html="list.title"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="tab-pane fade" id="pills-1"></div>-->
</div>


</body>

</html>